<!--摄像头管理——自动成片（商家端）-->
<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding: 0;">
      <div style="padding: 16px 16px 12px 16px">
        <file-toolbar
          :type="1"
          :mcList="mcList"
          :musics="musics"
          :data="data"
          :directorys="directorys"
          :grid.sync="grid"
          :checked="checked"
          :parentId="parentId"
          :typeId="typeId"
          @done="onDone"
        />
        <file-header
          :total="total"
          :directorys="directorys"
          @update:directorys="updateDirectorys"
        />
      </div>
      <div v-loading="loading">
        <!--    文件夹list-->
        <!-- typeId  1:视频 2:音频 3:台本 4:图片 -->
        <file-list
          :directorys="directorys"
          :typeId="typeId"
          :grid="grid"
          :data="data"
          :sort="sort"
          :order="order"
          :parentId="parentId"
          :search="search"
          :checked.sync="checked"
          @sort-change="onSortChange"
          @go-directory="onGoDirectory"
          @done="onDone"
        />
      </div>

    </el-card>
  </div>
</template>

<script>
  import FileToolbar from './components/file-toolbar.vue';
  import FileHeader from './components/file-header.vue';
  import FileList from './components/file-list.vue';
  import {queryFolder} from '@/api/lncomingManagement/fileList';
  import { publicFile, getFileAll } from '@/api/creatCenter/material';
  import {musicCollect, musicList} from "@/api/lncomingManagement/music";
  import {mc} from "@/utils/js/mc_list";


  export default {
    name: 'index',
    components: { FileToolbar, FileHeader, FileList },
    data() {
      return {
        typeId:0,
        // 加载状态
        loading: true,
        // 文件列表数据
        data: [],
        // 排序字段
        sort: '',
        // 排序方式
        order: '',
        // 选中数据
        checked: [],
        // 文件夹数据
        directorys: [],
        // 总文件数
        total: 0,
        // 是否网格展示
        grid: true,
        // 父级 id
        parentId: 0,
        search:'',
        //获取用户名
        username:this.$store.state.user.info.username,

        // 背景/热榜音乐 start
        mcList: [],  // 音乐类型list
        musics: [],  // 音乐列表list
        // end
      };
    },
    // 路由刷新
    activated(){
      this.init()
    },
    created() {
      console.log("this.$store.state.user",this.$store.state.user)
      console.log("search==================",this.search)
      this.query();
    },
    methods: {
      // 热榜音乐数据
      async init () {
        let res = await musicCollect(this.username)
        console.log("分类res=======",res)
        res['mc_list']
          ? mc.find((item) => {
            let mcItem
            (mcItem = res['mc_list'].find((m) => {
              return item === m.name
            })) ? this.mcList.push(mcItem) : void 0
          }) : console.log('加载分类失败11')
        let music
        this.mcList.length > 0
          ? music = await musicList(this.mcList[0]['id_str'],this.username) : console.log('分类音乐加载失败22')
        music && music['music_list']
          ? this.musics = music['music_list'] : console.log('分类音乐加载失败33')
        console.log("加载分类mcList,this.musics ",this.mcList,this.musics )
      },
      /* 查询文件列表 */
      async query() {
        this.data = [];
        this.checked = [];
        this.loading = true;
        //用户所创建的文件
        let userData = await queryFolder({
          merchantId: this.$store.state.user.info.merchantId,
          //父级目录：初次传0
          parentId: this.parentId // 商户id
          /*projectName:this.search,
          // 是否公共文件夹  0否，1是
          isCommon:'',
          //查公共文件根目录不需要传，子级需要
          username: this.username*/
        })
        console.log('userData', userData)
        let pubData = [] //文件夹
        let allFile = [] //文件
        if (this.parentId == 0) {
          pubData = await publicFile()
        }
        else{
          //根据条件获取所有文件
          allFile = await getFileAll({
            folderId: this.parentId,
            username: this.username
          })
          console.log("allFile",allFile)
        }

        //es6支持...数组合并
        // let data  = [...pubData, ...userData,...allFile];
        let data  = [...userData];
        console.log(data)
        this.data = data.map((d) => {
          // 添加图片缩略图 typeId:4 图片
          if(d.url && this.typeId==4){
            this.$set(d,'thumbnail',d.url)
          }
          return Object.assign({ name: d.projectName }, d, {
            // isDirectory: true, //代表是文件夹
            // isDirectory: d.isDirectory === 1 ? true : false,
            isDirectory: true,
            length: this.formatLength(d.length)
          })
        })
        this.loading = false;
        this.total = data.length;
      },
      /* 刷新列表数据 */
      onDone() {
        this.query();
      },
      /* 文件列表排序方式改变 */
      onSortChange(option) {
        this.order = option.order;
        this.sort = option.sort;
        this.query();
      },
      /* 进入文件夹 */
      onGoDirectory(item) {
        this.typeId=item.type;
        console.log("进入文件夹",item)
        this.updateDirectorys([...this.directorys, item]);
      },
      /* 更新文件夹数据 */
      updateDirectorys(values) {
        this.directorys = values;
        // 修改 type类型id，当this.directorys.length<=0是文件夹，以免进入其他文件被更改typeId
        if(this.directorys.length<=0){
          this.typeId=0;
        }
        this.parentId = this.directorys[this.directorys.length - 1]?.id ?? 0;
        console.log('更新文件夹数据========',this.directorys[this.directorys.length - 1]?.id,'this.directorys',this.directorys)

        this.query();
      },
      /* 格式化文件大小 */
      formatLength(length) {
        if (length == null) {
          return '-';
        }
        if (length < 1024) {
          return length + 'B';
        } else if (length < 1024 * 1024) {
          return (length / 1024).toFixed(1) + 'KB';
        } else if (length < 1024 * 1024 * 1024) {
          return (length / 1024 / 1024).toFixed(1) + 'M';
        } else {
          return (length / 1024 / 1024 / 1024).toFixed(1) + 'G';
        }
      }
    }
  };
</script>

